<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-data-table
            :headers="topHeaders"
            :items="menu"
            :single-expand="true"
            :expanded.sync="expanded"
            item-key="mid"
            show-expand
            class="elevation-1"
            disable-filtering
            hide-default-footer
            :loading="loading"
            :options.sync="options"
            :server-items-length="total"
            loading-text="正在加载~"
            no-data-text="没有数据"
            no-results-text="找不到哦"
        >
          <template v-slot:top>
            <v-toolbar flat color="secondary">
              <v-toolbar-title>一级菜单</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon @click="topMenuAddDialog = true">
                <v-icon>mdi-plus-circle-outline</v-icon>
              </v-btn>
            </v-toolbar>
          </template>
          <template v-slot:expanded-item="{ headers, item }">
            <!--            子菜单 表格-->
            <td :colspan="topHeaders.length" class="px-0">
              <v-data-table
                  :headers="subHeaders"
                  :items="item.subMenu"
                  item-key="mid"
                  hide-default-footer
                  class="elevation-1"
                  loading-text="正在加载~"
                  no-data-text="没有数据"
                  no-results-text="找不到哦"
              >
                <template v-slot:top>
                  <v-toolbar flat color="secondary lighten-1">
                    <v-toolbar-title>二级菜单</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn icon @click="openSubAdd(item)">
                      <v-icon>mdi-plus-circle-outline</v-icon>
                    </v-btn>
                  </v-toolbar>
                </template>
                <template v-slot:item.actions="{ item }">
                  <v-icon
                      class="mr-2"
                      @click="openSubEdit(item)"
                  >
                    mdi-pencil
                  </v-icon>
                  <v-icon
                      @click="openDel(item)"
                  >
                    mdi-delete
                  </v-icon>
                </template>
              </v-data-table>
            </td>
            <!--            子菜单 表格 end -->
          </template>

          <template v-slot:item.actions="{ item }">
            <v-icon
                class="mr-2"
                @click="openTopEdit(item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
                @click="openDel(item)"
            >
              mdi-delete
            </v-icon>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
    <!--    增加一级菜单-->
    <v-dialog
        v-model="topMenuAddDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          新增一级菜单
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form1"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="formTopAdd.title"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                label="菜单名称"
            ></v-text-field>

            <v-text-field
                v-model="formTopAdd.icon"
                label="菜单图标"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                required
            ></v-text-field>

            <v-select
                v-model="formTopAdd.privilege"
                :items="menuPrivileges"
                label="菜单权限"
                :rules="[rules.required]"
                required
            ></v-select>

            <v-text-field
                v-model="formTopAdd.seq"
                label="菜单顺序"
                required
                :rules="[rules.required]"
                type="number"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="topMenuAddDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitAdd(formTopAdd,'form1')">增加</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>
    <!--    增加二级菜单-->
    <v-dialog
        v-model="subMenuAddDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          新增二级菜单
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form2"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="formSubAdd.title"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                label="菜单名称"
            ></v-text-field>

            <v-text-field
                v-model="formSubAdd.route"
                label="菜单路径"
                :counter="30"
                :rules="[rules.required,rules.maxLength(50)]"
                required
            ></v-text-field>

            <v-text-field
                v-model="formSubAdd.seq"
                label="菜单顺序"
                required
                :rules="[rules.required]"
                type="number"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="subMenuAddDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitAdd(formSubAdd,'form2')">增加</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--    修改一级菜单-->
    <v-dialog
        v-model="topMenuEditDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          修改一级菜单
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form3"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="formTopEdit.title"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                label="菜单名称"
            ></v-text-field>

            <v-text-field
                v-model="formTopEdit.icon"
                label="菜单图标"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                required
            ></v-text-field>

            <v-select
                v-model="formTopEdit.privilege"
                :items="menuPrivileges"
                label="菜单权限"
                :rules="[rules.required]"
                required
            ></v-select>

            <v-text-field
                v-model="formTopEdit.seq"
                label="菜单顺序"
                required
                :rules="[rules.required]"
                type="number"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="topMenuEditDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitEdit(formTopEdit,'form3')">修改</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--    修改二级菜单-->
    <v-dialog
        v-model="subMenuEditDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          修改二级菜单
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form4"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="formSubEdit.title"
                :counter="30"
                :rules="[rules.required,rules.maxLength(30)]"
                label="菜单名称"
            ></v-text-field>

            <v-text-field
                v-model="formSubEdit.route"
                label="菜单路径"
                :counter="30"
                :rules="[rules.required,rules.maxLength(50)]"
                required
            ></v-text-field>

            <v-text-field
                v-model="formSubEdit.seq"
                label="菜单顺序"
                required
                :rules="[rules.required]"
                type="number"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="subMenuEditDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitEdit(formSubEdit,'form4')">修改</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--    删除菜单-->
    <v-dialog
        v-model="menuDelDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          确认删除 {{ formDel.title }} 吗？
        </v-card-title>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="menuDelDialog = false">取消</v-btn>
          <v-btn color="red" dark @click="submitDel(formDel)">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import {simpleCopy, rules} from "../../util/util";


export default {
  name: "MenuManage",
  data() {
    return {
      rules: rules,
      valid: true,
      expanded: [],
      singleExpand: false,
      topHeaders: [
        {text: '菜单名称', value: 'title', align: 'center', sortable: false},
        {text: '菜单图标', value: 'icon', align: 'center', sortable: false},
        {text: '顺序', value: 'seq', align: 'center', sortable: false},
        {text: '权限', value: 'privilege', align: 'center', sortable: false,},
        {text: '操作', value: 'actions', align: 'center', sortable: false,},
        {text: '', value: 'data-table-expand', align: 'center', sortable: false,},
      ],
      menu: [
        // {
        //   mdi: 1,
        //   title: 'test',
        //   icon: 'mdi-test',
        //   seq: 1,
        //   privilege: 2,
        //   subMenu: [
        //     {
        //       mdi: 2,
        //       title: 'test',
        //       route: '/admin/test',
        //       seq: 1,
        //       privilege: 2,
        //     }
        //   ],
        // }
      ],
      subHeaders: [
        {text: '菜单名称', value: 'title', align: 'center', sortable: false},
        {text: '菜单路径', value: 'route', align: 'center', sortable: false},
        {text: '顺序', value: 'seq', align: 'center', sortable: false},
        {text: '操作', value: 'actions', align: 'center', sortable: false,},
      ],
      loading:false,
      topMenuAddDialog: false,
      subMenuAddDialog: false,
      topMenuEditDialog: false,
      subMenuEditDialog: false,
      menuDelDialog: false,
      menuPrivileges: ['管理员', 'Admin管理员'],
      formTopAdd: {
        title: '',
        icon: '',
        privilege: '',
        seq: '',
        level: 1
      },
      formSubAdd: {
        title: '',
        route: '',
        seq: '',
        level: 2,
        privilege: '',
        belongTo: '',
      },
      formTopEdit: {
        mid: '',
        title: '',
        icon: '',
        privilege: '',
        seq: '',
      },
      formSubEdit: {
        mid: '',
        title: '',
        route: '',
        seq: '',
      },
      formDel: {
        mid: '',
        title: '',
      },
      options:{},
      total:0,

    }
  },
  // watch: {
  //   options: {
  //     handler() {
  //       this.flushMenus()
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    flushMenus: function () {
      this.loading = true
      // const { sortBy, sortDesc, page, itemsPerPage } = this.options
      // let data = {
      //   page:page,
      //   row:itemsPerPage
      // }
      let data = {}
      this.$http.post('admin/menu/showMenu', data).then(res => {
        this.menu = res.data
        this.total = res.total
        this.menu = this.menu.map(a => {
          if (a.privilege + '' === '2') a.privilege = '管理员'
          if (a.privilege + '' === '3') a.privilege = 'Admin管理员'
          a.subMenu = a.subMenu.map(b=>{
            if (b.privilege + '' === '2') b.privilege = '管理员'
            if (b.privilege + '' === '3') b.privilege = 'Admin管理员'
            return b
          })
          return a
        })
        this.loading = false
      }).catch(res => {
        this.$emit('toast', res.msg)
        this.loading = false
      })
    },
    closeDialogs() {
      this.topMenuAddDialog = false;
      this.subMenuAddDialog = false
      this.topMenuEditDialog = false
      this.subMenuEditDialog = false
      this.menuDelDialog = false
    },
    openTopAdd() {
      this.topMenuAddDialog = true
    },
    openSubAdd(item) {
      this.formSubAdd.belongTo = item.mid
      this.formSubAdd.privilege = item.privilege
      this.subMenuAddDialog = true
    },
    openTopEdit(item) {
      simpleCopy(item, this.formTopEdit)
      this.topMenuEditDialog = true
    },
    openSubEdit(item) {
      simpleCopy(item, this.formSubEdit)
      this.subMenuEditDialog = true
    },
    openDel(item) {
      simpleCopy(item, this.formDel)
      this.menuDelDialog = true
    },
    submitAdd(item,form) {
      if (this.$refs[form].validate()) {
        if (item.privilege === '管理员') item.privilege = 2
        if (item.privilege === 'Admin管理员') item.privilege = 3
        this.doRequest(item, 'admin/menu/addMenu')
      }
    },
    submitEdit(item,form) {
      if (this.$refs[form].validate()) {
        if (item.privilege === '管理员') item.privilege = 2
        if (item.privilege === 'Admin管理员') item.privilege = 3
        this.doRequest(item, 'admin/menu/updateMenu')
      }
    },
    submitDel(item) {
      this.doRequest(item, 'admin/menu/deleteMenu')
    },
    doRequest(data, url) {
      this.$http.post(url, data).then(res => {
        this.closeDialogs()
        this.flushMenus()
        this.formTopAdd = {
          title: '',
          icon: '',
          privilege: '',
          seq: '',
          level: 1
        }
        this.formSubAdd = {
          title: '',
          route: '',
          seq: '',
          level: 2,
          belongTo: '',
        }
      }).catch(res => {
        this.$emit('toast', res.msg)
        this.loading = false
      })
    }
  },
  beforeMount() {
    this.flushMenus()
  },
}
</script>

<style scoped>

</style>
